import React, { Component } from 'react';


class Shopping extends Component {
  constructor(props) {
    super(props)

    this.state = {
      close: true
    }
  }

  componentDidMount() {
    this.run(0);
  }

  run(t){
    let array = [];
    let n = 16;
    let j = n;
    while (n--) {
      array.push(10)
    }
    let arrayY = [];
    let ly = 0;
    for (let i = 0; i < j; i++) {
      let cy = -100 * Math.sin(0.02 * i * 20 + t);
      arrayY.push(cy - ly);
      ly = cy;
    }
    this.setState({
      dx:array.join(' '),
      dy:arrayY.join(' ')
    })
    // while (this.state.n--) this.state.y.push(10);
    // this.textaaa.setAttribute('dx', array.join(' '));
    // this.textaaa.setAttribute('dy', arrayY.join(' '))
  }
  click() {
    let self = this;
    let t = self.state.t;
    t+=0.02;
    this.setState({
      t
    });
    this.run(t);
    requestAnimationFrame(self.click.bind(this))
  }



  render() {
    return (
      <div className="product-box">
        <svg
          width='1000'
          height='400'
          xmlns="http://www.w3.org/2000/svg"
        >
          <text style={{fontSize:10}} ref={ref => this.textaaa = ref}
                id="textexa" x="100" y="100"
                dx={this.state.dx} dy={this.state.dy}>
            ABCDEFGHIGKLMN
          </text>
        </svg>
        <div>
          <button onClick={this.click.bind(this)}>点击运动</button>

        </div>
      </div>
    );
  }
}

export default Shopping;
